<template>
    <div class="CommodityInformationManagementEdit">
        <div class="CommodityInformationManagementEdit-model">
            <div class="CommodityInformationManagementEdit-model-three">
                <div class="CommodityInformationManagementEdit-model-three-one">分类信息</div>
                <div class="CommodityInformationManagementEdit-model-three-three">
                    <div>
                        <el-form
                            :model="tagform"
                            class="myform"
                            :rules="rules"
                            ref="tagform"
                            label-position="top"
                        >
                            <div>
                                <el-form-item label="分类名称" prop="title" class="myform-item">
                                    <el-input
                                        v-model="tagform.title"
                                        placeholder="请输入分类名称"
                                        :disabled="tagform.title == '形制'"
                                        clearable
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="标签底色" prop="font_color" class="myform-item">
                                    <el-color-picker v-model="tagform.font_color"></el-color-picker>
                                </el-form-item>
                                <el-form-item label="排序" prop="listorder">
                                    <el-input
                                        v-model="tagform.listorder"
                                        placeholder="请输入排序"
                                        clearable
                                    ></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item>
                                    <el-button type="primary" @click="onClickSubmit('tagform')">提 交</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <div class="CommodityInformationManagementEdit-model" style="margin-top:20px">
            <div class="CommodityInformationManagementEdit-model-three">
                <div class="CommodityInformationManagementEdit-model-three-one">标签信息</div>
                <div class="CommodityInformationManagementEdit-model-three-three">
                    <div>
                        <el-form
                            :model="tagformTwo"
                            class="myform"
                            :rules="rulesTwo"
                            ref="tagformTwo"
                            label-position="top"
                        >
                            <div>
                                <el-form-item label="新增标签名" prop="title" class="myform-item">
                                    <el-input
                                        v-model="tagformTwo.title"
                                        placeholder="请输入新增标签名"
                                        clearable
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="新增标签排序" prop="listorder">
                                    <el-input
                                        v-model="tagformTwo.listorder"
                                        placeholder="请输入新增标签排序"
                                        clearable
                                    ></el-input>
                                </el-form-item>
                                <el-form-item style="margin-top:50px;margin-left:40px">
                                    <el-button
                                        type="primary"
                                        @click="onClickSubmitTwo('tagformTwo')"
                                    >提 交</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>
                <div>
                    <el-table :data="list" style="width: 100%" border>
                        <el-table-column label="标签分类" align="center" prop="title"></el-table-column>
                        <el-table-column label="排序" align="center" prop="listorder"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="{ row }">
                                <el-button type="text" @click="onEdit(row)">编辑</el-button>
                                <el-button
                                    type="text"
                                    style="color:red"
                                    @click="onDelete(row.id)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <el-dialog title="编辑标签" :visible.sync="dialogVisible" width="30%">
            <el-form
                :model="tagformTwoEdit"
                :rules="rulesTwoEdit"
                ref="tagformTwoEdit"
                label-width="100px"
            >
                <el-form-item label="分类名称" prop="title">
                    <el-input
                        v-model="tagformTwoEdit.title"
                        placeholder="请输入分类名称"
                        clearable
                        style="width:70%"
                    ></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="listorder">
                    <el-input
                        v-model="tagformTwoEdit.listorder"
                        placeholder="请输入排序"
                        clearable
                        style="width:70%"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onClickSubmitEdit('tagformTwoEdit')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { postAdminOperateGetLabelLook, postAdminOperateEditLabel, postAdminOperateDelLabel } from "@/api"
export default {
    data() {
        return {
            dialogVisible: false,
            tagformTwo: {
                listorder: "",
                title: "",
                fid: 0
            },
            rulesTwo: {
                title: [
                    { required: true, message: '请输入标签名称', trigger: 'blur' },
                ],
                listorder: [
                    { required: true, message: '请输入排序', trigger: 'blur' },
                ]
            },
            tagform: {
                id: '',
                title: "",
                font_color: "",
                listorder: "",
                fid: 0
            },
            rules: {
                title: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
                font_color: [
                    { required: true, message: '请选择标签底色', trigger: 'blur' },
                ],
                listorder: [
                    { required: true, message: '请输入排序', trigger: 'blur' },
                ]
            },
            tagformTwoEdit: {
                id: '',
                listorder: '',
                title: "",
                fid: 0
            },
            rulesTwoEdit: {
                title: [
                    { required: true, message: '请输入标签名称', trigger: 'blur' },
                ],
                listorder: [
                    { required: true, message: '请输入排序', trigger: 'blur' },
                ]
            },
            list: []
        }
    },
    activated() {
        let id = this.$route.query.id
        if (id) {
            this.tagformTwo.fid = id
            this.tagformTwoEdit.fid = id
            this.postAdminOperateGetLabelLook(id)
        }

    },
    methods: {
        onEdit(e) {
            this.dialogVisible = true
            this.tagformTwoEdit.id = e.id
            this.tagformTwoEdit.title = e.title
            this.tagformTwoEdit.listorder = e.listorder
        },
        postAdminOperateGetLabelLook(id) {
            let obj = {
                id
            }
            postAdminOperateGetLabelLook(obj).then(res => {
                console.log("详情------>", res);
                let data = res.data
                this.tagform = {
                    id: data.id,
                    title: data.title,
                    font_color: data.font_color,
                    listorder: data.listorder,
                    fid: 0
                }
                this.list = data.list
            })
        },
        // 提交分类信息
        onClickSubmit(tagformtext) {
            let that = this;
            let { tagform } = this
            this.$refs[tagformtext].validate(async (valid) => {
                if (valid) {
                    postAdminOperateEditLabel(tagform).then((res) => {

                        hat.$message({
                            type: "success",
                            message: `保存成功!`,
                        });
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 二级标签
        onClickSubmitTwo(tagformtext) {
            let that = this;
            let { tagformTwo } = this
            this.$refs[tagformtext].validate(async (valid) => {
                if (valid) {
                    postAdminOperateEditLabel(tagformTwo).then((res) => {
                        let id = this.$route.query.id
                        this.postAdminOperateGetLabelLook(id)
                        that.$message({
                            type: "success",
                            message: `新建标签成功!`,
                        });
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 编辑二级标签
        onClickSubmitEdit(tagformtext) {
            let that = this;
            let { tagformTwoEdit } = this
            this.$refs[tagformtext].validate(async (valid) => {
                if (valid) {
                    postAdminOperateEditLabel(tagformTwoEdit).then((res) => {
                        let id = this.$route.query.id
                        this.postAdminOperateGetLabelLook(id)
                        that.$message({
                            type: "success",
                            message: `修改标签成功!`,
                        });
                        this.dialogVisible = false
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 删除
        onDelete(id) {
            let obj = {
                id,
            };
            this.$confirm("确定删除该标签种类?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    postAdminOperateDelLabel(obj).then((res) => {
                        let id = this.$route.query.id
                        this.postAdminOperateGetLabelLook(id)
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    }
}
</script>

<style lang="scss" scoped>
.myform {
    > div {
        display: flex;
    }
    &-item {
        margin-right: 80px;
    }
}
.CommodityInformationManagementEdit {
    .CommodityInformationManagementEdit-model {
        background: #ffffff;
        padding: 20px;
        border-radius: 10px;
        .CommodityInformationManagementEdit-model-one {
            display: flex;
            justify-content: space-between;
            align-items: center;
            > div:nth-child(1) {
                display: flex;
                align-items: center;
                font-weight: 800;
                > div:nth-child(1) {
                    background: #409eff;
                    width: 4px;
                    height: 30px;
                    border-radius: 2px;
                    margin-right: 10px;
                }
            }
        }
        .CommodityInformationManagementEdit-model-three {
            margin-top: 10px;
            background: #ffffff;
            padding: 20px;
            border-radius: 4px;
            .CommodityInformationManagementEdit-model-three-one {
                font-weight: 800;
            }

            .CommodityInformationManagementEdit-model-three-three {
                margin-top: 20px;
                > div:nth-child(1) {
                    display: flex;
                    align-items: center;
                    > div {
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}
</style>